<template>
    <div class="ma-discover" :style="{paddingTop:tabSelected==='1'?46+'px':''}">

        <div class="invite-friend">
            邀请球友
        </div>

        <div class="ma-sub-title" :style="{height:tabSelected==='1'?40+'px':0+'px'}">
            还没有朋友玩，快去邀请吧
        </div>
        <div v-show="tabSelected!=='1'" style="height: 10px;background-color: #FCFCFC"></div>

        <div class="ma-discover-content">
            <div class="ma-header-tab-container">
                <div class="item" @click="changeTab('1')">你可能感兴趣的</div>
                <div class="item" @click="changeTab('2')">全场排名</div>
                <div class="move-line" :style="{left:linePositionY+'%'}">
                </div>
            </div>
            <!-- tab-container -->
            <mt-tab-container v-model="tabSelected" :class="{'match-ranking':tabSelected==='2'}">
                <mt-tab-container-item id="1">
                    <vue-scroll :pullDownRefresh="false" :pullUpLoad="false">

                        <div class="user-simple-info-card" v-for="(v,i) in testUserList" :key="i">
                            <span class="ma-header-img" style="flex-shrink: 0;"><img src="" alt=""></span>
                            <div class="user-simple-info-text">
                                <span>昵称：{{v.name}}</span>
                                <span>签名：{{v.motto}}</span>
                            </div>
                        </div>

                    </vue-scroll>
                    <div class="ma-discover-filter-container">
                        <div class="height-radius-btn">仅看女生/男生</div>
                        <div class="height-radius-btn">换一批</div>
                    </div>
                </mt-tab-container-item>

                <mt-tab-container-item id="2">
                    <vue-scroll :pullDownRefresh="false" :pullUpLoad="false">
                        <div class="ranking-user-info-card-wrapper" v-for="(v,i) in testUserList" :key="i">
                            <div class="ranking-user-info-card">
                                <div class="ranking-user-header-container">
                                    <span class="ma-header-img"><img src="" alt=""></span>
                                    <span style=" text-shadow: 0 0 8px #888; color: rgba(60,60,60,0);margin-top: 12px">偷看</span>
                                </div>
                                <div class="ranking-user-info-text">
                                    <p style="margin-bottom: 10px">千载难逢型</p>
                                    <p>你们有共同的偶像：{{v.name}}</p>
                                    <p>你们都看：{{v.motto}}</p>
                                    <p>你们有共同的敌人：{{v.motto}}</p>
                                </div>
                                <div class="height-radius-btn" @click="openPayToCheckDialog(i)" v-if="!v.isPaid">一元偷看
                                </div>
                            </div>
                            <p class="ellipsis" style="margin-top: 18px;padding-left: 30px">签名：这是一个签名签名签名签名</p>
                        </div>
                    </vue-scroll>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>

        <div class="pay-dialog" v-if="showPayDialog">
            <div class="pay-window">
                <p style="margin: 28px 0 16px">1元见面礼</p>
                <div class="pay-btn" @click="payToCheck">
                    微信支付
                </div>
                <span class="cancel-pay-btn" @click="closePayDialog">X</span>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Discover",
        data() {
            return {
                tabSelected: "1",
                testUserList: [
                    {
                        name: "这是昵称1",
                        motto: "这是一个签名这是一个签名",
                        isPaid: false
                    },
                    {
                        name: "这是昵称2",
                        motto: "这是一个签名"
                    },
                    {
                        name: "这是昵称3",
                        motto: "这是一个签名"
                    },
                    {
                        name: "这是昵称4",
                        motto: "这是一个签名"
                    },
                    {
                        name: "这是昵称5",
                        motto: "这是一个签名"
                    },
                    {
                        name: "这是昵称6",
                        motto: "这是一个签名这是一个签名这是一个签名这是一个签名"
                    },
                    {
                        name: "这是昵称7",
                        motto: "这是一个签名"
                    }
                ],
                showPayDialog: false,
                payToCheckId: null
            }
        },
        computed: {
            // 通过当前tab数计算红线位置
            linePositionY() {
                return (200 * (-0 + this.tabSelected) - 100) / 4
            }
        },
        methods: {
            changeTab(tabName) {
                if (tabName !== this.tabSelected) {
                    this.tabSelected = tabName;
                }
            },
            openPayToCheckDialog(uid) {
                this.payToCheckId = uid;
                this.showPayDialog = !this.showPayDialog;
            },
            closePayDialog() {
                this.payToCheckId = null;
                this.showPayDialog = false;
            },
            payToCheck() {
                this.testUserList[this.payToCheckId].isPaid = true;
                // 需要将这个解锁的用户移到第一个
                let paidUser = this.testUserList.splice(this.payToCheckId, 1);
                this.testUserList.unshift(...paidUser);
                this.payToCheckId = null;
                this.showPayDialog = false;
            }
        }
    }
</script>

<style>
    /*Discover.vue*/
    .ma-discover {
        font-weight: 100;
        width: 100%;
        height: 100%;
        padding-bottom: 16px;
        transition: .3s ease-in-out;
    }

    .invite-friend {
        z-index: 9;
        font-size: 12px;
        position: absolute;
        top: 16px;
        right: 7px;
    }

    .ma-discover .ma-sub-title {
        overflow: hidden;
        transition: .3s ease-in-out;
        padding-right: 0;
    }

    .ma-header-tab-container {
        position: relative;
        width: 100%;
        height: 27px;
        line-height: 27px;
    }

    .ma-discover .ma-header-tab-container .item {
        float: left;
        width: 50%;
        text-align: center;
    }

    .ma-header-tab-container .move-line {
        position: absolute;
        height: 2px;
        width: 20px;
        bottom: 0;
        background-color: #FF0000;
        transform: translateX(-50%);
        transition: .25s ease-in-out;
    }

    .ma-discover-content {
        position: relative;
        width: 100%;
        height: 100%;
        padding-top: 27px;
        background-color: #FCFCFC;
    }

    .ma-discover-content .ma-header-tab-container {
        position: absolute;
        top: 0;
        left: 0;

    }

    .ma-discover-content .mint-tab-container, .ma-discover-content .mint-tab-container-wrap {
        width: 100%;
        height: 100%;
        padding: 0 0 24px;
    }

    .ma-discover-content .match-ranking .mint-tab-container, .ma-discover-content .match-ranking .mint-tab-container-wrap {
        padding-bottom: 4px;
    }

    /*用户卡片START*/
    .user-simple-info-card {
        display: flex;
        flex: 0 0 27px;
        align-items: center;
        padding-left: 33px;
        margin: 14px 0;
        height: 56px;
    }

    .user-simple-info-text {
        display: flex;
        margin-left: 22px;
        height: 56px;
        flex-direction: column;
        justify-content: space-around;
        overflow: hidden;
    }

    .user-simple-info-text span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*用户卡片END*/

    /*全场排名卡片START*/
    .ranking-user-info-card-wrapper {
        margin-bottom: 28px;
    }

    .ranking-user-info-card {
        padding-left: 80px;
        position: relative;
    }

    .ranking-user-header-container {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        flex-direction: column;
        align-items: center;
        float: left;
        width: 80px;
    }

    .ranking-user-info-text {
        padding: 4px 0 0 10px;
        width: 100%;
    }

    .ranking-user-info-text p + p {
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ranking-user-info-card .height-radius-btn {
        position: absolute;
        top: 4px;
        right: 10px;
    }

    /*全场排名卡片END*/

    .ma-discover-filter-container {
        display: flex;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 22px;
        bottom: 15px;
    }

    .height-radius-btn {
        height: 22px;
        line-height: 22px;
        min-width: 50px;
        border: 1px solid #707070;
        border-radius: 11px;
        padding: 0 7px;
    }

    .ma-discover-filter-container .height-radius-btn + .height-radius-btn {
        margin-left: 14px;
    }

    .pay-dialog {
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .pay-window {
        position: relative;
        margin: 0 auto;
        top: 50%;
        transform: translateY(-50%);
        width: 230px;
        height: 120px;
        background-color: white;
        text-align: center;
        border: 1px solid #EAEAEA;
    }

    .pay-btn {
        margin: 0 auto;
        width: 160px;
        height: 30px;
        line-height: 30px;
        background-color: #EAEAEA;
    }

    .cancel-pay-btn {
        position: absolute;
        top: 2px;
        right: 2px;
        padding: 4px;
        font-family: "Microsoft YaHei UI,Microsoft YaHei,微软雅黑";
        color: #bebebe;
    }

</style>
